import { defineStore } from 'pinia'

// 定义分类类型
export interface Category {
  id: string
  name: string
  icon?: string
}

// 定义二级分类类型
export interface SubCategory {
  id: string
  name: string
  categoryId: string
}

// 定义三级分类类型
export interface ThirdCategory {
  id: string
  name: string
  subCategoryId: string
}

// 定义导航项类型
export interface NavItem {
  id: string
  name: string
  url: string
  description: string
  logo: string
  categoryId: string
  subCategoryId: string
  thirdCategoryId: string
}

export const useAppStore = defineStore('app', {
  state: () => ({
    // 分类数据
    categories: [] as Category[],
    // 二级分类数据
    subCategories: [] as SubCategory[],
    // 三级分类数据
    thirdCategories: [] as ThirdCategory[],
    // 当前选中的分类ID
    selectedCategoryId: '',
    // 当前选中的二级分类ID
    selectedSubCategoryId: '',
    // 当前选中的三级分类ID
    selectedThirdCategoryId: '',
    // 导航数据
    navItems: [] as NavItem[],
    // 搜索关键词
    searchKeyword: ''
  }),

  getters: {
    // 获取当前分类下的二级分类
    currentSubCategories: (state) => {
      if (!state.selectedCategoryId) return state.subCategories
      return state.subCategories.filter(sub => sub.categoryId === state.selectedCategoryId)
    },
    
    // 获取当前二级分类下的三级分类
    currentThirdCategories: (state) => {
      if (!state.selectedSubCategoryId) return state.thirdCategories
      return state.thirdCategories.filter(third => third.subCategoryId === state.selectedSubCategoryId)
    },
    
    // 过滤导航项
    filteredNavItems: (state) => {
      let items = [...state.navItems]
      
      // 按分类筛选
      if (state.selectedCategoryId) {
        items = items.filter(item => item.categoryId === state.selectedCategoryId)
      }
      
      // 按二级分类筛选
      if (state.selectedSubCategoryId) {
        items = items.filter(item => item.subCategoryId === state.selectedSubCategoryId)
      }
      
      // 按三级分类筛选
      if (state.selectedThirdCategoryId) {
        items = items.filter(item => item.thirdCategoryId === state.selectedThirdCategoryId)
      }
      
      // 搜索筛选
      if (state.searchKeyword) {
        const keyword = state.searchKeyword.toLowerCase()
        items = items.filter(item => 
          item.name.toLowerCase().includes(keyword) || 
          item.description.toLowerCase().includes(keyword)
        )
      }
      
      return items
    }
  },

  actions: {
    // 设置选中的分类
    setSelectedCategory(categoryId: string) {
      this.selectedCategoryId = categoryId
      // 重置二级分类和三级分类选择
      this.selectedSubCategoryId = ''
      this.selectedThirdCategoryId = ''
      // 自动选择第一个二级分类
      if (this.subCategories && Array.isArray(this.subCategories)) {
        const filteredSubCategories = this.subCategories.filter(sc => sc.categoryId === categoryId)
        if (filteredSubCategories && Array.isArray(filteredSubCategories) && filteredSubCategories.length > 0 && filteredSubCategories[0]) {
          const firstSubCategory = filteredSubCategories[0]
          this.selectedSubCategoryId = firstSubCategory.id
          // 自动选择第一个三级分类
          if (this.thirdCategories && Array.isArray(this.thirdCategories)) {
            const filteredThirdCategories = this.thirdCategories.filter(tc => tc.subCategoryId === firstSubCategory.id)
            if (filteredThirdCategories && Array.isArray(filteredThirdCategories) && filteredThirdCategories.length > 0 && filteredThirdCategories[0]) {
              this.selectedThirdCategoryId = filteredThirdCategories[0].id
            }
          }
        }
      }
    },

    // 设置选中的二级分类
    setSelectedSubCategory(subCategoryId: string) {
      this.selectedSubCategoryId = subCategoryId
      this.selectedThirdCategoryId = '' // 重置三级分类选择
    },

    // 设置选中的三级分类
    setSelectedThirdCategory(thirdCategoryId: string) {
      this.selectedThirdCategoryId = thirdCategoryId
    },

    // 设置搜索关键词
    setSearchKeyword(keyword: string) {
      this.searchKeyword = keyword
    },

    // 加载三级分类数据
    async loadThirdCategories() {
      // 【动态加载注释】以下为模拟数据
      // 实际实现时，应替换为从Java后端API获取数据
      // 例如：
      // try {
      //   const response = await axios.get('/api/thirdcategories');
      //   this.thirdCategories = response.data;
      // } catch (error) {
      //   console.error('加载三级分类数据失败:', error);
      // }
      this.thirdCategories = [
        // 开发工具下的三级分类
        { id: '1-1-1', name: '文本编辑器', subCategoryId: '1-1' },
        { id: '1-2-1', name: 'Java IDE', subCategoryId: '1-2' },
        { id: '1-2-2', name: '前端IDE', subCategoryId: '1-2' },
        { id: '1-3-1', name: '版本控制', subCategoryId: '1-3' },
        { id: '1-3-2', name: '代码托管', subCategoryId: '1-3' },
        { id: '1-3-3', name: '容器化', subCategoryId: '1-3' },
        
        // 前端框架下的三级分类
        { id: '2-1-1', name: 'Vue框架', subCategoryId: '2-1' },
        { id: '2-1-2', name: 'Vue生态', subCategoryId: '2-1' },
        { id: '2-2-1', name: 'React框架', subCategoryId: '2-2' },
        { id: '2-2-2', name: 'React生态', subCategoryId: '2-2' },
        
        // 后端框架下的三级分类
        { id: '3-1-1', name: 'Java框架', subCategoryId: '3-1' },
        { id: '3-2-1', name: 'Python框架', subCategoryId: '3-2' },
        { id: '3-3-1', name: 'Go框架', subCategoryId: '3-3' },
        { id: '3-4-1', name: 'Node.js框架', subCategoryId: '3-4' },
        { id: '3-4-2', name: 'PHP框架', subCategoryId: '3-4' },
        
        // 数据库下的三级分类
        { id: '4-1-1', name: 'MySQL系列', subCategoryId: '4-1' },
        { id: '4-1-2', name: 'PostgreSQL系列', subCategoryId: '4-1' },
        { id: '4-1-3', name: '轻量级数据库', subCategoryId: '4-1' },
        { id: '4-2-1', name: '文档数据库', subCategoryId: '4-2' },
        { id: '4-2-2', name: '缓存数据库', subCategoryId: '4-2' },
        { id: '4-3-1', name: '搜索引擎', subCategoryId: '4-3' },
        
        // DevOps下的三级分类
        { id: '5-1-1', name: '监控告警', subCategoryId: '5-1' },
        { id: '5-2-1', name: '容器编排', subCategoryId: '5-2' },
        { id: '5-3-1', name: 'CI/CD工具', subCategoryId: '5-3' },
        { id: '5-3-2', name: '云原生CI/CD', subCategoryId: '5-3' },
        
        // 设计工具下的三级分类
        { id: '6-1-1', name: 'UI设计工具', subCategoryId: '6-1' },
        { id: '6-1-2', name: 'UX设计工具', subCategoryId: '6-1' },
        { id: '6-1-3', name: '原型工具', subCategoryId: '6-1' },
        { id: '6-2-1', name: 'API模拟', subCategoryId: '6-2' },
        
        // 学习资源下的三级分类
        { id: '7-1-1', name: '在线课程', subCategoryId: '7-1' },
        { id: '7-1-2', name: '编程挑战', subCategoryId: '7-1' },
        { id: '7-2-1', name: '技术文档', subCategoryId: '7-2' },
        { id: '7-2-2', name: '社区问答', subCategoryId: '7-2' },
        
        // 其他工具下的三级分类
        { id: '8-1-1', name: '浏览器工具', subCategoryId: '8-1' },
        { id: '8-2-1', name: 'API测试', subCategoryId: '8-2' },
        { id: '8-2-2', name: '包管理', subCategoryId: '8-2' },
        { id: '8-2-3', name: '镜像仓库', subCategoryId: '8-2' }
      ]
    },

    // 加载分类数据
    async loadCategories() {
      // 【动态加载注释】以下为模拟数据
      // 实际实现时，应替换为从Java后端API获取数据
      // 例如：
      // try {
      //   const response = await axios.get('/api/categories');
      //   this.categories = response.data;
      // } catch (error) {
      //   console.error('加载分类数据失败:', error);
      // }
      this.categories = [
        { id: '1', name: '开发工具', icon: 'Tools' },
        { id: '2', name: '前端框架', icon: 'Code' },
        { id: '3', name: '后端框架', icon: 'Server' },
        { id: '4', name: '数据库', icon: 'Database' },
        { id: '5', name: 'DevOps', icon: 'Setting' },
        { id: '6', name: '设计工具', icon: 'Palette' },
        { id: '7', name: '学习资源', icon: 'Book' },
        { id: '8', name: '其他工具', icon: 'More' }
      ]
      
      // 默认选中第一个分类
      if (this.categories && Array.isArray(this.categories) && this.categories.length > 0 && this.categories[0]) {
        this.selectedCategoryId = this.categories[0].id
      }
    },

    // 加载二级分类数据
    async loadSubCategories() {
      // 【动态加载注释】以下为模拟数据
      // 实际实现时，应替换为从Java后端API获取数据
      // 例如：
      // try {
      //   const response = await axios.get('/api/subcategories');
      //   this.subCategories = response.data;
      // } catch (error) {
      //   console.error('加载二级分类数据失败:', error);
      // }
      this.subCategories = [
        // 开发工具子分类
        { id: '1-1', name: '代码编辑器', categoryId: '1' },
        { id: '1-2', name: '集成开发环境', categoryId: '1' },
        { id: '1-3', name: '版本控制与部署', categoryId: '1' },
        // 前端框架子分类
        { id: '2-1', name: 'Vue生态', categoryId: '2' },
        { id: '2-2', name: 'React生态', categoryId: '2' },
        { id: '2-3', name: 'Angular生态', categoryId: '2' },
        { id: '2-4', name: '其他前端框架', categoryId: '2' },
        // 后端框架子分类
        { id: '3-1', name: 'Java框架', categoryId: '3' },
        { id: '3-2', name: 'Python框架', categoryId: '3' },
        { id: '3-3', name: 'Go框架', categoryId: '3' },
        { id: '3-4', name: '其他后端框架', categoryId: '3' },
        // 数据库子分类
        { id: '4-1', name: '关系型数据库', categoryId: '4' },
        { id: '4-2', name: 'NoSQL数据库', categoryId: '4' },
        { id: '4-3', name: '搜索与分析引擎', categoryId: '4' },
        // DevOps子分类
        { id: '5-1', name: '监控与日志', categoryId: '5' },
        { id: '5-2', name: '容器与编排', categoryId: '5' },
        { id: '5-3', name: 'CI/CD工具', categoryId: '5' },
        // 设计工具子分类
        { id: '6-1', name: 'UI/UX设计', categoryId: '6' },
        { id: '6-2', name: '原型与模拟', categoryId: '6' },
        // 学习资源子分类
        { id: '7-1', name: '在线课程', categoryId: '7' },
        { id: '7-2', name: '技术文档', categoryId: '7' },
        // 其他工具子分类
        { id: '8-1', name: '浏览器工具', categoryId: '8' },
        { id: '8-2', name: 'API工具', categoryId: '8' }
      ]
    },

    // 加载导航数据
    async loadNavItems() {
      // 【动态加载注释】以下为模拟数据
      // 实际实现时，应替换为从Java后端API获取数据
      // 例如：
      // try {
      //   // 可以根据当前选择的分类、二级分类和三级分类进行过滤
      //   const params = new URLSearchParams();
      //   if (this.selectedCategoryId) params.append('categoryId', this.selectedCategoryId);
      //   if (this.selectedSubCategoryId) params.append('subCategoryId', this.selectedSubCategoryId);
      //   if (this.selectedThirdCategoryId) params.append('thirdCategoryId', this.selectedThirdCategoryId);
      //   if (this.searchKeyword) params.append('keyword', this.searchKeyword);
      //   
      //   const response = await axios.get(`/api/navitems?${params.toString()}`);
      //   this.navItems = response.data;
      // } catch (error) {
      //   console.error('加载导航数据失败:', error);
      // }
      this.navItems = [
        // 开发工具
      { id: '101', name: 'VS Code', url: 'https://code.visualstudio.com/', description: '微软开源的轻量级代码编辑器，支持多种编程语言和丰富的插件生态系统。', logo: 'vscode.png', categoryId: '1', subCategoryId: '1-1', thirdCategoryId: '1-1-1' },
      { id: '102', name: 'Sublime Text', url: 'https://www.sublimetext.com/', description: '高性能文本编辑器，以其速度和插件支持而闻名。', logo: 'sublime.png', categoryId: '1', subCategoryId: '1-1', thirdCategoryId: '1-1-1' },
      { id: '103', name: 'IntelliJ IDEA', url: 'https://www.jetbrains.com/idea/', description: 'JetBrains的Java IDE，提供智能代码完成和强大的重构功能。', logo: 'idea.png', categoryId: '1', subCategoryId: '1-2', thirdCategoryId: '1-2-1' },
      { id: '104', name: 'WebStorm', url: 'https://www.jetbrains.com/webstorm/', description: '专为前端开发优化的IDE，提供智能代码补全和调试功能。', logo: 'webstorm.png', categoryId: '1', subCategoryId: '1-2', thirdCategoryId: '1-2-2' },
        { id: '105', name: 'Git', url: 'https://git-scm.com/', description: '分布式版本控制系统，用于跟踪代码变更和协作开发。', logo: 'git.png', categoryId: '1', subCategoryId: '1-3', thirdCategoryId: '1-3-1' },
        { id: '106', name: 'GitHub', url: 'https://github.com/', description: '代码托管平台，提供Git版本控制和协作功能。', logo: 'github.png', categoryId: '1', subCategoryId: '1-3', thirdCategoryId: '1-3-2' },
        { id: '107', name: 'Docker', url: 'https://www.docker.com/', description: '开源容器化平台，简化应用程序的开发、交付和运行。', logo: 'docker.png', categoryId: '1', subCategoryId: '1-3', thirdCategoryId: '1-3-3' },
        // 前端框架
        { id: '201', name: 'Vue.js', url: 'https://vuejs.org/', description: '渐进式JavaScript框架，易学易用，适合构建响应式用户界面。', logo: 'vue.png', categoryId: '2', subCategoryId: '2-1', thirdCategoryId: '2-1-1' },
        { id: '202', name: 'React', url: 'https://react.dev/', description: 'Facebook开发的JavaScript库，用于构建用户界面的组件化开发。', logo: 'react.png', categoryId: '2', subCategoryId: '2-2', thirdCategoryId: '2-2-1' },
        { id: '203', name: 'Angular', url: 'https://angular.io/', description: 'Google的TypeScript全功能框架，提供完整的前端解决方案。', logo: 'angular.png', categoryId: '2', subCategoryId: '2-3', thirdCategoryId: '' },
        { id: '204', name: 'Svelte', url: 'https://svelte.dev/', description: '无虚拟DOM的JavaScript框架，编译时框架，提供更高效的渲染。', logo: 'svelte.png', categoryId: '2', subCategoryId: '2-4', thirdCategoryId: '' },
        { id: '205', name: 'Element Plus', url: 'https://element-plus.org/', description: '基于Vue 3的桌面端组件库，提供丰富的UI组件。', logo: 'element.png', categoryId: '2', subCategoryId: '2-1', thirdCategoryId: '2-1-2' },
        { id: '206', name: 'Ant Design', url: 'https://ant.design/', description: '企业级UI设计语言和React组件库。', logo: 'antd.png', categoryId: '2', subCategoryId: '2-2', thirdCategoryId: '2-2-2' },
        { id: '207', name: 'Vite', url: 'https://vitejs.dev/', description: '下一代前端构建工具，提供极速的开发体验。', logo: 'vite.png', categoryId: '2', subCategoryId: '2-1', thirdCategoryId: '2-1-2' },
        { id: '208', name: 'Next.js', url: 'https://nextjs.org/', description: '基于React的全栈框架，支持服务端渲染和静态站点生成。', logo: 'nextjs.png', categoryId: '2', subCategoryId: '2-2', thirdCategoryId: '2-2-2' },
        // 后端框架
        { id: '301', name: 'Spring Boot', url: 'https://spring.io/projects/spring-boot', description: 'Java后端框架，简化Spring应用的开发和配置。', logo: 'spring.png', categoryId: '3', subCategoryId: '3-1', thirdCategoryId: '3-1-1' },
        { id: '302', name: 'Django', url: 'https://www.djangoproject.com/', description: 'Python高级Web框架，鼓励快速开发和简洁实用的设计。', logo: 'django.png', categoryId: '3', subCategoryId: '3-2', thirdCategoryId: '3-2-1' },
        { id: '303', name: 'Gin', url: 'https://gin-gonic.com/', description: '轻量级高性能Go Web框架，提供简洁的API。', logo: 'gin.png', categoryId: '3', subCategoryId: '3-3', thirdCategoryId: '3-3-1' },
        { id: '304', name: 'Express', url: 'https://expressjs.com/', description: '基于Node.js的快速、极简Web框架。', logo: 'express.png', categoryId: '3', subCategoryId: '3-4', thirdCategoryId: '3-4-1' },
        { id: '305', name: 'FastAPI', url: 'https://fastapi.tiangolo.com/', description: '现代、快速的Python Web框架，基于标准Python类型提示。', logo: 'fastapi.png', categoryId: '3', subCategoryId: '3-2', thirdCategoryId: '3-2-1' },
        { id: '306', name: 'Laravel', url: 'https://laravel.com/', description: '优雅的PHP Web开发框架，提供富有表现力的语法。', logo: 'laravel.png', categoryId: '3', subCategoryId: '3-4', thirdCategoryId: '3-4-2' },
        // 数据库
        { id: '401', name: 'MySQL', url: 'https://www.mysql.com/', description: '最流行的开源关系型数据库管理系统。', logo: 'mysql.png', categoryId: '4', subCategoryId: '4-1', thirdCategoryId: '4-1-1' },
        { id: '402', name: 'PostgreSQL', url: 'https://www.postgresql.org/', description: '功能强大的开源对象关系型数据库系统。', logo: 'postgres.png', categoryId: '4', subCategoryId: '4-1', thirdCategoryId: '4-1-2' },
        { id: '403', name: 'MongoDB', url: 'https://www.mongodb.com/', description: '面向文档的NoSQL数据库，提供高性能、高可用性和可扩展性。', logo: 'mongodb.png', categoryId: '4', subCategoryId: '4-2', thirdCategoryId: '4-2-1' },
        { id: '404', name: 'Redis', url: 'https://redis.io/', description: '开源内存数据结构存储，可用作数据库、缓存和消息代理。', logo: 'redis.png', categoryId: '4', subCategoryId: '4-2', thirdCategoryId: '4-2-2' },
        { id: '405', name: 'SQLite', url: 'https://www.sqlite.org/', description: '轻量级嵌入式SQL数据库引擎。', logo: 'sqlite.png', categoryId: '4', subCategoryId: '4-1', thirdCategoryId: '4-1-3' },
        { id: '406', name: 'Elasticsearch', url: 'https://www.elastic.co/', description: '分布式搜索和分析引擎。', logo: 'elasticsearch.png', categoryId: '4', subCategoryId: '4-3', thirdCategoryId: '4-3-1' },
        // DevOps
      { id: '501', name: 'Kubernetes', url: 'https://kubernetes.io/', description: '开源容器编排平台，自动化部署、扩展和管理容器化应用程序。', logo: 'k8s.png', categoryId: '5', subCategoryId: '5-2', thirdCategoryId: '5-2-1' },
        { id: '502', name: 'Jenkins', url: 'https://www.jenkins.io/', description: '开源自动化服务器，用于持续集成和持续部署。', logo: 'jenkins.png', categoryId: '5', subCategoryId: '5-3', thirdCategoryId: '5-3-1' },
        { id: '503', name: 'GitHub Actions', url: 'https://github.com/features/actions', description: 'GitHub的CI/CD平台，用于自动化软件工作流程。', logo: 'github-actions.png', categoryId: '5', subCategoryId: '5-3', thirdCategoryId: '5-3-2' },
        { id: '504', name: 'Prometheus', url: 'https://prometheus.io/', description: '开源监控和告警系统。', logo: 'prometheus.png', categoryId: '5', subCategoryId: '5-1', thirdCategoryId: '5-1-1' },
        // 设计工具
        { id: '601', name: 'Figma', url: 'https://www.figma.com/', description: '基于浏览器的UI设计和协作工具。', logo: 'figma.png', categoryId: '6', subCategoryId: '6-1', thirdCategoryId: '6-1-1' },
        { id: '602', name: 'Adobe XD', url: 'https://www.adobe.com/products/xd.html', description: '专为用户体验设计而打造的工具。', logo: 'xd.png', categoryId: '6', subCategoryId: '6-1', thirdCategoryId: '6-1-2' },
        { id: '603', name: 'Sketch', url: 'https://www.sketch.com/', description: 'Mac平台的数字设计工具，专为UI/UX设计而构建。', logo: 'sketch.png', categoryId: '6', subCategoryId: '6-1', thirdCategoryId: '6-1-3' },
        { id: '604', name: 'Mockoon', url: 'https://mockoon.com/', description: 'API模拟工具，用于快速创建和测试API。', logo: 'mockoon.png', categoryId: '6', subCategoryId: '6-2', thirdCategoryId: '6-2-1' },
        // 学习资源
        { id: '701', name: 'MDN Web Docs', url: 'https://developer.mozilla.org/', description: 'Mozilla提供的Web技术参考文档。', logo: 'mdn.png', categoryId: '7', subCategoryId: '7-2', thirdCategoryId: '7-2-1' },
        { id: '702', name: 'FreeCodeCamp', url: 'https://www.freecodecamp.org/', description: '非营利性组织，提供免费的编程教程和认证。', logo: 'freecodecamp.png', categoryId: '7', subCategoryId: '7-1', thirdCategoryId: '7-1-1' },
        { id: '703', name: 'LeetCode', url: 'https://leetcode.com/', description: '在线编程学习平台，提供算法挑战和面试准备。', logo: 'leetcode.png', categoryId: '7', subCategoryId: '7-1', thirdCategoryId: '7-1-2' },
        { id: '704', name: 'Stack Overflow', url: 'https://stackoverflow.com/', description: '最大的程序员问答社区。', logo: 'stackoverflow.png', categoryId: '7', subCategoryId: '7-2', thirdCategoryId: '7-2-2' },
        // 其他工具
        { id: '801', name: 'Postman', url: 'https://www.postman.com/', description: 'API开发环境，用于构建、测试和文档化API。', logo: 'postman.png', categoryId: '8', subCategoryId: '8-2', thirdCategoryId: '8-2-1' },
        { id: '802', name: 'Chrome DevTools', url: 'https://developer.chrome.com/docs/devtools/', description: 'Chrome浏览器内置的网页开发和调试工具。', logo: 'chrome-devtools.png', categoryId: '8', subCategoryId: '8-1', thirdCategoryId: '8-1-1' },
        { id: '803', name: 'npm', url: 'https://www.npmjs.com/', description: 'JavaScript包管理器和世界上最大的软件注册表。', logo: 'npm.png', categoryId: '8', subCategoryId: '8-2', thirdCategoryId: '8-2-2' },
        { id: '804', name: 'Docker Hub', url: 'https://hub.docker.com/', description: 'Docker容器镜像的存储库和分发平台。', logo: 'dockerhub.png', categoryId: '8', subCategoryId: '8-2', thirdCategoryId: '8-2-3' }
      ]
    },

    // 初始化加载所有数据
    async initialize() {
      // 【动态加载注释】初始化加载所有数据
      // 实际项目中，可以考虑按需加载数据以提高性能
      // 例如，先加载分类，等用户选择分类后再加载对应子分类
      await this.loadCategories()
      await this.loadSubCategories()
      await this.loadThirdCategories()
      await this.loadNavItems()
      // 设置默认选中第一个分类
      if (this.categories && Array.isArray(this.categories) && this.categories.length > 0 && this.categories[0]) {
        const firstCategory = this.categories[0]
        this.selectedCategoryId = firstCategory.id
        // 自动加载第一个分类下的所有二级分类
        if (this.subCategories && Array.isArray(this.subCategories)) {
          const filteredSubCategories = this.subCategories.filter(sc => sc.categoryId === firstCategory.id)
          if (filteredSubCategories && Array.isArray(filteredSubCategories) && filteredSubCategories.length > 0 && filteredSubCategories[0]) {
            const firstSubCategory = filteredSubCategories[0]
            this.selectedSubCategoryId = firstSubCategory.id
            // 自动加载第一个二级分类下的所有三级分类
            if (this.thirdCategories && Array.isArray(this.thirdCategories)) {
              const filteredThirdCategories = this.thirdCategories.filter(tc => tc.subCategoryId === firstSubCategory.id)
              if (filteredThirdCategories && Array.isArray(filteredThirdCategories) && filteredThirdCategories.length > 0 && filteredThirdCategories[0]) {
                this.selectedThirdCategoryId = filteredThirdCategories[0].id
              }
            }
          }
        }
      }
    }
  }
})
